<template>
  <div>
    <div ref="ganttChart" style="width: 100%; height: 800px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import moment from 'moment'

export default {
  data() {
    return {
      chart: null,
      fakeData: [
        {
          task: 'task0',
          startTime: '2018-04-18 01:17:12',
          endTime: '2018-04-18 01:19:10',
          dataStatus: 0
        },
        {
          task: 'task1',
          startTime: '2018-04-18 01:18:15',
          endTime: '2018-04-18 01:19:20',
          dataStatus: 0
        },
        {
          task: 'task2',
          startTime: '2018-04-18 02:11:32',
          endTime: '2018-04-18 02:18:50',
          dataStatus: 0
        },
        {
          task: 'task3',
          startTime: '2018-04-18 02:18:50',
          endTime: '2018-04-18 03:16:38',
          dataStatus: 1
        },
        {
          task: 'task4',
          startTime: '2018-04-18 02:19:48',
          endTime: '2018-04-18 02:21:57',
          dataStatus: 1
        },
        {
          task: 'task5',
          startTime: '2018-04-18 03:16:38',
          endTime: '2018-04-18 03:19:38',
          dataStatus: 1
        },
        {
          task: 'task6',
          startTime: '2018-04-18 03:19:38',
          endTime: '2018-04-18 03:27:49',
          dataStatus: 0
        },
        {
          task: 'task7',
          startTime: '2018-04-18 07:29:37',
          endTime: '2018-04-18 07:33:01',
          dataStatus: 0
        },
        {
          task: 'task8',
          startTime: '2018-04-18 03:27:49',
          endTime: '2018-04-18 04:26:05',
          dataStatus: 1
        },
        {
          task: 'task9',
          startTime: '2018-04-18 04:26:05',
          endTime: '2018-04-18 06:06:36',
          dataStatus: 0
        },
        {
          task: 'task10',
          startTime: '2018-04-18 06:06:36',
          endTime: '2018-04-18 06:15:15',
          dataStatus: 0
        },
        {
          task: 'task11',
          startTime: '2018-04-18 03:27:49',
          endTime: '2018-04-18 03:34:50',
          dataStatus: 0
        },
        {
          task: 'task0',
          startTime: '2018-04-18 01:17:12',
          endTime: '2018-04-18 01:19:10',
          dataStatus: 0
        },
        {
          task: 'task1',
          startTime: '2018-04-18 01:18:15',
          endTime: '2018-04-18 01:19:20',
          dataStatus: 0
        },
        {
          task: 'task2',
          startTime: '2018-04-18 02:11:32',
          endTime: '2018-04-18 02:18:50',
          dataStatus: 0
        },
        {
          task: 'task3',
          startTime: '2018-04-18 02:18:50',
          endTime: '2018-04-18 03:16:38',
          dataStatus: 1
        },
        {
          task: 'task4',
          startTime: '2018-04-18 02:19:48',
          endTime: '2018-04-18 02:21:57',
          dataStatus: 1
        },
        {
          task: 'task5',
          startTime: '2018-04-18 03:16:38',
          endTime: '2018-04-18 03:19:38',
          dataStatus: 1
        },
        {
          task: 'task6',
          startTime: '2018-04-18 03:19:38',
          endTime: '2018-04-18 03:27:49',
          dataStatus: 0
        },
        {
          task: 'task7',
          startTime: '2018-04-18 07:29:37',
          endTime: '2018-04-18 07:33:01',
          dataStatus: 0
        },
        {
          task: 'task8',
          startTime: '2018-04-18 03:27:49',
          endTime: '2018-04-18 04:26:05',
          dataStatus: 1
        },
        {
          task: 'task9',
          startTime: '2018-04-18 04:26:05',
          endTime: '2018-04-18 06:06:36',
          dataStatus: 0
        },
        {
          task: 'task10',
          startTime: '2018-04-18 06:06:36',
          endTime: '2018-04-18 06:15:15',
          dataStatus: 0
        },
        {
          task: 'task11',
          startTime: '2018-04-18 03:27:49',
          endTime: '2018-04-18 03:34:50',
          dataStatus: 0
        },
        {
          task: 'task0',
          startTime: '2018-04-18 01:17:12',
          endTime: '2018-04-18 01:19:10',
          dataStatus: 0
        },
        {
          task: 'task1',
          startTime: '2018-04-18 01:18:15',
          endTime: '2018-04-18 01:19:20',
          dataStatus: 0
        },
        {
          task: 'task2',
          startTime: '2018-04-18 02:11:32',
          endTime: '2018-04-18 02:18:50',
          dataStatus: 0
        },
        {
          task: 'task3',
          startTime: '2018-04-18 02:18:50',
          endTime: '2018-04-18 03:16:38',
          dataStatus: 1
        },
        {
          task: 'task4',
          startTime: '2018-04-18 02:19:48',
          endTime: '2018-04-18 02:21:57',
          dataStatus: 1
        },
        {
          task: 'task5',
          startTime: '2018-04-18 03:16:38',
          endTime: '2018-04-18 03:19:38',
          dataStatus: 1
        },
        {
          task: 'task6',
          startTime: '2018-04-18 03:19:38',
          endTime: '2018-04-18 03:27:49',
          dataStatus: 0
        },
        {
          task: 'task7',
          startTime: '2018-04-18 07:29:37',
          endTime: '2018-04-18 07:33:01',
          dataStatus: 0
        },
        {
          task: 'task8',
          startTime: '2018-04-18 03:27:49',
          endTime: '2018-04-18 04:26:05',
          dataStatus: 1
        },
        {
          task: 'task9',
          startTime: '2018-04-18 04:26:05',
          endTime: '2018-04-18 06:06:36',
          dataStatus: 0
        },
        {
          task: 'task10',
          startTime: '2018-04-18 06:06:36',
          endTime: '2018-04-18 06:15:15',
          dataStatus: 0
        },
        {
          task: 'task11',
          startTime: '2018-04-18 03:27:49',
          endTime: '2018-04-18 03:34:50',
          dataStatus: 0
        },
        {
          task: 'task0',
          startTime: '2018-04-18 01:17:12',
          endTime: '2018-04-18 01:19:10',
          dataStatus: 0
        },
        {
          task: 'task1',
          startTime: '2018-04-18 01:18:15',
          endTime: '2018-04-18 01:19:20',
          dataStatus: 0
        },
        {
          task: 'task2',
          startTime: '2018-04-18 02:11:32',
          endTime: '2018-04-18 02:18:50',
          dataStatus: 0
        },
        {
          task: 'task3',
          startTime: '2018-04-18 02:18:50',
          endTime: '2018-04-18 03:16:38',
          dataStatus: 1
        },
        {
          task: 'task4',
          startTime: '2018-04-18 02:19:48',
          endTime: '2018-04-18 02:21:57',
          dataStatus: 1
        },
        {
          task: 'task5',
          startTime: '2018-04-18 03:16:38',
          endTime: '2018-04-18 03:19:38',
          dataStatus: 1
        },
        {
          task: 'task6',
          startTime: '2018-04-18 03:19:38',
          endTime: '2018-04-18 03:27:49',
          dataStatus: 0
        },
        {
          task: 'task7',
          startTime: '2018-04-18 07:29:37',
          endTime: '2018-04-18 07:33:01',
          dataStatus: 0
        },
        {
          task: 'task8',
          startTime: '2018-04-18 03:27:49',
          endTime: '2018-04-18 04:26:05',
          dataStatus: 1
        },
        {
          task: 'task9',
          startTime: '2018-04-18 04:26:05',
          endTime: '2018-04-18 06:06:36',
          dataStatus: 0
        },
        {
          task: 'task10',
          startTime: '2018-04-18 06:06:36',
          endTime: '2018-04-18 06:15:15',
          dataStatus: 0
        },
        {
          task: 'task11',
          startTime: '2018-04-18 03:27:49',
          endTime: '2018-04-18 03:34:50',
          dataStatus: 0
        }
      ]
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.ganttChart)
      const colors = ['#67C23A', '#F56C6C'] // 绿色和红色
      const option = {
        tooltip: {
          formatter: function (params) {
            return `${params.name}: ${params.value[1]} ~ ${params.value[2]}`
          }
        },
        xAxis: {
          type: 'time',
          splitLine: {
            show: false
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        yAxis: {
          type: 'category',
          data: this.fakeData.map(request => request.task),
          splitLine: {
            show: false
          }
        },
        dataZoom: [
          {
            type: 'slider',
            yAxisIndex: 0,
            start: 0,
            end: 50,
            filterMode: 'weakFilter',
          },
          {
            type: 'inside',
            id: 'insideY',
            yAxisIndex: 0,
            start: 0,
            end: 20,
            zoomOnMouseWheel: false,
            moveOnMouseMove: true,
            moveOnMouseWheel: true
          }
        ],
        series: [
          {
            type: 'custom',
            renderItem: (params, api) => {
              const categoryIndex = api.value(0)
              const start = api.coord([api.value(1), categoryIndex])
              const end = api.coord([api.value(2), categoryIndex])
              const height = api.size([0, 1])[1] * 0.6
              const status = api.value(3)
              const color = colors[status]
              return {
                type: 'rect',
                shape: {
                  x: start[0],
                  y: start[1] - height / 2,
                  width: end[0] - start[0],
                  height: height
                },
                style: {
                  fill: colors[status]
                }
              }
            },
            encode: {
              x: [1, 2],
              y: 0
            },
            data: this.fakeData.map((request, index) => [index, moment(request.startTime).toISOString(), moment(request.endTime).toISOString(), request.dataStatus, request.task])
          }
        ]
      }
      this.chart.setOption(option)
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', () => {
      if (this.chart) {
        this.chart.resize()
      }
    })
  }
}
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>
